<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="ZhangBin">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>3D banner CSS3版</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-size: 14px;
            overflow: hidden;
        }

        a {
            text-decoration: none;
            font-size: 14px;
            color: #fff;
        }

        ul li, ol {
            list-style-type: none;
        }

        .bg_img {
            width: 100%;
            height: 100%;
        }

        .bg_img img {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
        }

        .container {
            margin-top: 150px;
            width: 100%;
            height: 600px;
        }

        .container .banner {
            position: relative;
            margin: auto;
            width: 800px;
            height: 300px;
            perspective: 800px;
        }

        .container .banner ul {
            width: 800px;
            height: 300px;
        }

        .container .banner ul li {
            width: 200px;
            height: 300px;
            position: relative;
            transform-style: preserve-3d;
            float: left;
        }

        .container .banner ul li div {
            width: 200px;
            height: 300px;
            position: absolute;
            text-align: center;
            line-height: 300px;
        }

        .container .banner ul li div:nth-child(1) {
            top: -300px;
            transform: translateZ(150px) rotateX(90deg);
            transform-origin: bottom;
            background-image: url("http://demo.zhangbin.xin/3d_banner_fklb/images/3.jpg");
        }

        .container .banner ul li div:nth-child(2) {
            top: 300px;
            transform: translateZ(150px) rotateX(-90deg);
            transform-origin: top;
            background-image: url("http://demo.zhangbin.xin/3d_banner_fklb/images/1.jpg");
        }

        .container .banner ul li div:nth-child(3) {
            transform: translateZ(150px);
            background-image: url("http://demo.zhangbin.xin/3d_banner_fklb/images/2.jpg");
        }

        .container .banner ul li div:nth-child(4) {
            transform: translateZ(-150px) rotateX(180deg);
            background-image: url("http://demo.zhangbin.xin/3d_banner_fklb/images/4.jpg");
        }

        .container .banner ul li:nth-child(1) div {
            background-position: 0;
        }

        .container .banner ul li:nth-child(2) div {
            background-position: -200px;
        }

        .container .banner ul li:nth-child(3) div {
            background-position: -400px;
        }

        .container .banner ul li:nth-child(4) div {
            background-position: -600px;
        }

        .container .banner ol {
            position: absolute;
            right: -60px;
            bottom: -15px;
        }

        .container .banner ol li {
            position: relative;
            z-index: 2;
            float: left;
            margin: 3px;
            font-size: 14px;
            border: 1px solid #fff;
            background-color: rgba(0, 0, 0, 0.8);
            color: #fff;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            border-radius: 50%;
            cursor: pointer;
            transition: .5s;
        }

        .container .banner ol:hover li {
            box-shadow: 1px 1px 1px 0 rgba(204, 204, 204, 0.7);
            transition: .5s;
        }

        .container .banner ol li:hover {
            box-shadow: 1px 1px 1px 1px #222;
            transition: .5s;
        }

        /*  .banner:hover ul li{
             transform:rotateX(270deg);
             transition:all 2s linear;
         }  */
        /*每个li一次延迟0.2秒*/
        .container .banner ul li:nth-child(1) {
            transition: 1s .0s;
        }

        .container .banner ul li:nth-child(2) {
            transition: 1s .2s;
        }

        .container .banner ul li:nth-child(3) {
            transition: 1s .4s;
        }

        .container .banner ul li:nth-child(4) {
            transition: 1s .6s;
        }
    </style>
</head>

<body>
<div class="bg_img">
    <img src="http://demo.zhangbin.xin/sbtdxczs/image/bgs.jpg"/>
</div>
<div class="container">
    <div class="banner">
        <ul>
            <li>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </li>
            <li>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </li>
            <li>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </li>
            <li style="z-index:-1;">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </li>
        </ul>
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ol>
    </div>
</div>

<script type="text/javascript" src="/static/plugins/jQuery/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(".container .banner ol").find("li").click(function () {
        var index = $(this).index() + 1;
        $(".banner ul").find("li").css("transform", "rotateX(" + index * 90 + "deg)")
    })
</script>
</body>
</html>
